<template>
   
    <div style="display:flex;width:100%; height:185px">
        <div class="enterpriseNature" id="enterpriseNature" ref="enterpriseNature" style="width:40%;height:185px">

        </div>
        <div class="list">
            <div class="list_item" v-for="(item,index) in list" :key="index" @click="searchIndustry(item.classificationName)">
                <span >{{item.classificationName}}</span>
            </div>
        </div>
    </div>
    
</template>

<script>
import echarts from 'echarts'
import { reqEnterprise_classification } from '@/api/home/index.js'
import { mapGetters } from 'vuex'
export default {
    data(){
        return {
            list: [],
         
        }
    },
    computed: {
        ...mapGetters(['customCode']),

    },
    watch: {
        customCode(val) {
            // console.log(val);
            this.getList(val)

        },
        list: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    created() {
        // console.log(this.$store.state.homeStatus.customName);
        if (this.customCode == '' || !this.customCode) {
            // 默认22 上海海关
            this.getList('22')
        } else {
            // 有数据就用store里面的数据
            this.getList(this.customCode)
        }
    },
    mounted() {
       
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods:{

        searchIndustry(name){

             this.$store.commit('homeStatus/changeShowIndustry', {
                show: true,
                value: name,
             })
        },
         async getList(code) {
            const res=await reqEnterprise_classification({customsCode:code})
            // console.log(res);
            this.list = res.data
           
          
            

            this.chart.hideLoading();
           
        },
        initChart() {
            this.chart = echarts.init(document.getElementById('enterpriseNature'), null, { renderer: 'canvas' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.list);
        },
        setOptions(list){
           
            // const nameList=list.map(item=>{
            //     return item.classificationName
            // })
            let dataList=[]
            list.forEach(item=>{
                dataList.push({
                    name: item.classificationName,
                    value: item.classificationRate,
                    rate: item.toClassificationRate
                })
            })
            const colorList = [
                "#47A2FF ",
                "#53C8D1",
                "#59CB74",
                "#FBD444",
                "#7F6AAD",
                "#585247",
                "#85acfb",
                "#cfdffd",
                "#85e2bd",
                "#daf6eb",
                "#8795ae",
                "#dbdfe6",
                "#f8ce52",
                "#fdf0cb",
                "#9488fb",
                "#d5d0fd",
                "#93d6f1",
                "#def2fb",
                "#b088cb",
            ];
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: list.length > 0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                title: {
                    text: list.length>0?"行业分类":'',

                    textStyle: {
                        fontSize: 16,
                        color: "#fff",
                        lineHeight: 16,
                    },

                    textAlign: "center",
                    left:"48%" ,
                    top: "44%",
                },
                tooltip: {
                    trigger: "item",
                    formatter:`{b}: {d}`+'%'
                },
                // legend: {
                //     type: "scroll",
                //     orient: "vertical",
                //     right: "10%",
                //     top: "center",
                //     // itemGap: 30,
                //     // selectedMode: false,
                //     icon: "pin",
                //     height: 180,
                //     data: nameList,
                //     pageIconColor: "white",//激活的分页按钮颜色
                //     pageIconInactiveColor: "#2f4554",//没激活的分页按钮颜色
                //     pageTextStyle:{
                //         color:'#fff'
                //     },
                //     textStyle: {
                //         color: "#fff",
                //         rich: {
                //             uname: {
                //                 width: 200,
                //             },
                //             unum: {
                //                 color: "#4ed139",
                //                 width: 10,
                //                 align: "right",
                //             },
                //         },
                //     },
                //     formatter(name) {
                //         return `{uname|${name}}`;
                //     },
                // },
                color: colorList,
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: [50, 80],
                        center: ["50%", "50%"],
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            
                        },
                        data: dataList
                    },
                ],
            })
        }
    
    }
   
}
</script>

<style scoped lang="scss">
.list {
    flex: 1;
    margin-top: 10px;
    margin-left: 20px;
    height:185px;
    overflow-x:auto ;
    text-align: start;
    font-size: 14px;
    
    .list_item {
        
        color: #fff;
        height: 25px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }
    .list_item:hover {
        color: #00C1FF;
    }
}
</style>